<template>
  <div calss="container">
    <div>子组件2</div>
    <div class="box">
      <button @click="sendMsg">发送信息</button><br />
      ====================================
      <grandson></grandson>
    </div>
  </div>
</template>

<script>
import grandson from "./grandson.vue";
import { eventBus } from "@/brotherBus";
export default {
  props: {},
  data() {
    return {
      msg: "这是一条子组件2中的信息",
    };
  },
  // 计算属性
  computed: {},
  // 方法集合
  methods: {
    sendMsg() {
      // 子父传值
      this.$emit("childTwoMsg", this.msg);
      // 兄弟传值
      eventBus.$emit("brotherTwoMsg", this.msg);
    },
  },
  // 生命周期 - DOM元素渲染前调用
  created() {},
  // 生命周期 - DOM元素渲染后调用
  mounted() {},
  components: { grandson },
};
</script>
<style lang='less' scoped>
.box {
  width: 500px;
  border: 1px solid;
  padding: 10px;
}
</style>
